<template>
    <div>
        <van-dialog :close-on-click-overlay="false" class="common-dialog" v-model="showDialog" :show-confirm-button="false" :show-cancel-button="false">
            <div slot="title" class="bg-312 p-b-20 view flex-row align-center justify-between p-l-20 p-r-20">
                <div class="fz-14 c-fff">寄售</div>
                <van-icon name="cross" size="24" color="#fff" @click="closeSaleDialog"/>
            </div>
            <div class="bg-312 view align-center justify-center p-l-20 p-r-20 p-b-20">
                <div class="box-line">
                    <img  data-position="2" data-blur="4" data-focus="200" data-falloff="400" data-direction="y" :src="checkedData.originalNft && checkedData.originalNft.image" class="width100 height100 imgc tiltshift" style="width:100px;height:100px;"/>
                </div>
                <div class="fz-16 c-fff m-b-20">{{ checkedData.price }}</div>
                <div class="fz-14 c-d7c m-b-20">当前价格</div>
                
                <van-field
                    style="border-radius: 5px;height:40px;"
                    disabled
                    :border="false"
                    type="textarea"
                    :placeholder="`提示：预计能收到 ${checkedData.expect_price} `"
                />

                <div class="view flex-row align-center justify-center" style="margin-top:30px;">
                    <van-button style="width:130px;background-color: transparent;margin-right:15px;" type="primary" @click="closeSaleDialog"  plain color="#D7C19A" >取消</van-button>
                    <van-button style="width:130px;" disabled type="primary" color="#D7C19A" @click="zzJS" :loading="makeLoading">寄售暂未开放</van-button>
                </div>
            </div>
    </van-dialog>
    </div>
</template>

<script>
import Web3 from '@/util/web3.min'
import { saleService } from '@/api/index'
export default {
    data () {
        return {
            state: 2,
            web3: null,
            showDialog: false,
            authLoading: false,
            makeLoading: false,
            activeD: 0,
            checkedData: {},
        }
    },
    methods: {
        closeSaleDialog() {
            this.showDialog = false
        },
        show(data) {
            this.checkedData = data
            this.showDialog = true
            setTimeout( () => {
                $('.tiltshift').tiltShift();
            }, 300)
            
        },
        // 寄售
        async zzJS() {
            this.makeLoading = true
            const res = await saleService({nft_id: this.checkedData.id, nft_code: this.checkedData.code})
            this.makeLoading = false
            this.$toast({
                message: res.msg
            })
            this.closeSaleDialog()
            this.$emit('onSuccess')
        },
    }

}
</script>

<style scoped>
.imgc {
    animation: move 6s 0s infinite;
	-webkit-animation: move 6s 0s infinite;
	transform-origin: bottom;
	-webkit-transform-origin: bottom;
    border-radius: 10px;
}
@keyframes move {

	0%,
	65% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	70% {
		-webkit-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	75% {
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}

	80% {
		-webkit-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	85% {
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}

	90% {
		-webkit-transform: rotate(6deg);
		transform: rotate(6deg);
	}

	95% {
		-webkit-transform: rotate(-6deg);
		transform: rotate(-6deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}
.box-line {border: 1px solid #D7C19A;padding: 15px;margin-bottom: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(215, 193, 154,.5);}
.view {display: flex;flex-direction: column;}
.height100 {height: 100%;}
.width100 {width: 100%;}
.flex-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex:2;}
.flex-1-50 {flex: 0 0 50%;}
.flex-wrap {flex-wrap: wrap;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center {justify-content:center;}
.ovhidden {overflow: hidden;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.c-333 {color: #333;}
.fz-20 {font-size: 30px;}
.c-663 {color: #66625C;}
.c-d7c {color: #D7C19A;}
.fz-12 {font-size: 12px;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
.c-fff {color: #fff;}
.width100 {width: 100%;}
.p-l-24 {padding-left: 24px;}
.p-r-24 {padding-right: 24px;}
.p-t-16 {padding-top: 16px;}
.m-b-36 {margin-bottom: 36px;}
.b-r-radius-20 {border-radius: 20px;}
.bg-242 {background-color: #24232D;}
.m-b-30 {margin-bottom: 30px;}
.p-l-30 {padding-left: 30px;}
.p-r-30 {padding-right: 30px;}
.p-t-20 {padding-top: 20px;}
.p-b-20 {padding-bottom: 20px;}
.p-r-20 {padding-right: 20px;}
.p-l-20 {padding-left: 20px;}
.bold {font-weight: bold;}
.c-070 {color: #707070;}
.m-r-20 {margin-right: 20px;}
.m-b-5 {margin-bottom: 5px;}
.van-tabbar {background: #19181F;}
.van-tabbar-item {background: #19181F;}
[class*=van-hairline]::after {content: none !important;}
.van-collapse-item__title {
    background: transparent;
    border: 1px solid #D7C19A;
    border-radius: 20px;
    color: #FE974F;
}
.m-b-35 {margin-bottom: 25px;}
.m-b-15 {margin-bottom: 15px;}
.m-r-15 {margin-right: 15px;}
.p-l-12 {padding-left: 12px;}
.p-r-12 {padding-right: 12px;}
.m-b-12 {margin-bottom: 12px;}
.p-l-15 {padding-left: 15px;}
.p-r-15 {padding-right: 15px;}
.m-b-20 {margin-bottom: 10px;}
.van-cell--clickable:active {background-color: transparent;}
.van-collapse-item__content {background-color: transparent;padding: 12px 0;}
.van-collapse-item {margin-bottom: 15px;}
.inset-img {height: 25px;
    left: 0;
    top: -9px;
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
}
</style>